import React, { Component } from 'react';
import { createPortal } from 'react-dom';
import ReactEcharts from 'echarts-for-react';
import darkEchartsTheme from '../../config/theme/darkEchartsTheme';
import echarts from 'echarts';

const modalRoot = document.getElementById('dialog-root');

class TechnologyCooperationTopChart extends Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('TechnologyCooperationTopChart');
    this.state = {
      chartOption: undefined,
      chartHeight: 250,
    };
  }
  componentDidMount() {
    modalRoot.appendChild(this.el);
    echarts.registerTheme('theme_name', darkEchartsTheme);
    this.setChartData();
  }
  setChartData() {
    const option = {
      tooltip: {},
      animationDurationUpdate: 1500,
      animationEasingUpdate: 'quinticInOut',
      series: [
        {
          type: 'graph',
          layout: 'none',
          symbolSize: 30,
          draggable: true,
          roam: true,
          label: {
            normal: {
              show: true
            }
          },
          // edgeSymbol: ['circle', 'arrow'],
          edgeSymbolSize: [4, 10],
          edgeLabel: {
            normal: {
              textStyle: {
                fontSize: 12
              }
            }
          },
          data: [{
            name: '徐州',
            x: 400,
            y: 0
          }, {
            name: '盐城',
            x: 650,
            y: 50
          }, {
            name: '南通',
            x: 750,
            y: 100
          }, {
            name: '合肥',
            symbolSize: 50,
            x: 300,
            y: 300
          }, {
            name: '上海',
            symbolSize: 50,
            x: 800,
            y: 200
          }, {
            name: '南京',
            symbolSize: 50,
            x: 350,
            y: 100
          }, {
            name: '杭州',
            symbolSize: 50,
            x: 700,
            y: 400
          },
          {
            name: '宁波',
            x: 750,
            y: 550
          },
          {
            name: '温州',
            x: 600,
            y: 600
          }],
          // links: [],
          links: [{
            source: '上海',
            target: '杭州',
            label: {
              normal: {
                show: true,
                formatter: 'G60沿线'
              }
            }
          }, {
            source: '上海',
            target: '合肥',
            label: {
              normal: {
                show: false,
                formatter: '次级干线'
              }
            },
          }, {
            source: '南京',
            target: '杭州',
            label: {
              normal: {
                show: false,
                formatter: '次级干线'
              }
            },
          }, {
            source: '上海',
            target: '南京',
            label: {
              normal: {
                show: true,
                formatter: 'G42沿线'
              }
            },
          },],
          lineStyle: {
            normal: {
              opacity: 0.9,
              width: 2,
              curveness: 0
            }
          }
        }
      ]
    };
    this.setState({ chartOption: option });
  }

  render() {
    const { style, width, height } = this.props;
    const dtTitle = `长三角科研合作网络`;
    const { chartOption } = this.state;
    return createPortal(
      <div
        style={{
          ...style,
          display: 'flex',
          flexDirection: 'column',
          width: width,
          height: height,
          color: '#fff',
          backgroundColor: 'rgba(0,0,0,0.6)',
          boxShadow: '0 1px 2px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.23)',
        }}
      >
        <div
          style={{
            lineHeight: '35px',
            height: 35,
            borderBottom: '1px solid rgb(238, 238, 238,0.2)',
            textAlign: 'center',
          }}
        >
          <div style={{ float: 'left', marginLeft: 6, fontSize: 15 }}><div style={{ float: 'left', width: 5, height: 35, marginRight: 10, backgroundColor: 'rgba(63,177,277,1)', }} />{dtTitle}</div>
          <div style={{ float: 'right', marginRight: 8 }}>
          </div>
        </div>
        <div style={{ margin: '3px 8px 3px 8px' }}>
          <div>
            {chartOption !== undefined && (
              <ReactEcharts
                option={chartOption}
                notMerge={true}
                lazyUpdate={true}
                // theme={'theme_name'}
                style={{ height: this.state.chartHeight }}
              />
            )}
          </div>
        </div>
      </div>,
      this.el
    );
  }
}

export default TechnologyCooperationTopChart;
